<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">
        五子棋对战
        <span class="spacer"></span>
       
        <div class="menu-container"> 
            <ul class="menu">
                <li><a href="">menu</a>
                    <ul class="submenu">
                        <li> <a href="login.html">退出登录</a></li>
                        <li><a href="user_info.html">个人信息</a></li>
                        <li><a href="Security_setting.html">密保设置</a></li>
                        <li><a href="photo.html">头像设置</a></li>
                        <li><a href="userinfo_update.html">个人信息设置</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div>
            <!-- 展示用户信息 -->
            <div id="screen">
                <div class="card">
                    <img src="image/sky.jpeg" class="avtar" alt="" id="photo">
                
                    <div class="card_gobang">
                        <span>用户名</span><span id="username"></span>
                    </div>
                    <div class="card_gobang">
                        <span>分数</span><span id="scoreValue"></span>
                    </div>
                    <div class="card_gobang">
                        <span>总场数</span><span id="totalCountValue"></span>
                    </div>
                    <div class="card_gobang">
                        <span>获胜场次</span><span id="winCountValue"></span>
                    </div>
                </div>
            </div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
                
            
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        function getUserInfo(){
            jQuery.ajax({
<!--                url:"http://"+ location.host + "/user/getUsernfo",-->
                url:"/user/getUsernfo",

                type:"POST",
                data:{},
                success:function(result){
                    if(result!=null && result.code==200){
                            jQuery("#username").text(result.data.username);
                            jQuery("#scoreValue").text(result.data.score);
                            jQuery("#totalCountValue").text(result.data.totalCount);
                            jQuery("#winCountValue").text(result.data.winCount);
                            $("#photo").attr("src","http://"+ location.host + result.data.photo);
                        }else{
                            alert("抱歉：查询用户信息失败，请重试！");
                        }
                }
            });
        }
        getUserInfo();

        // 此处进行初始化 websocket, 并且实现前端的匹配逻辑. 
        // 此处的路径必须写作 /findMatch, 千万不要写作 /findMatch/ 
        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function() {
            console.log("onopen");
        }
        websocket.onclose = function() {
            console.log("onclose");
        }
        websocket.onerror = function() {
            console.log("onerror");
        }
        // 监听页面关闭事件. 在页面关闭之前, 手动调用这里的 websocket 的 close 方法. 
        window.onbeforeunload = function() {
            websocket.close();
        }

        // 一会重点来实现, 要处理服务器返回的响应
        websocket.onmessage = function(e) {
            // 处理服务器返回的响应数据. 这个响应就是针对 "开始匹配" / "结束匹配" 来对应的
            // 解析得到的响应对象. 返回的数据是一个 JSON 字符串, 解析成 js 对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if (!resp.ok) {
                console.log("游戏大厅中接收到了失败响应! " + resp.reason);
                return;
            }
            if (resp.message == 'startMatch') {
                // 开始匹配请求发送成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)'
            } else if (resp.message == 'stopMatch') {
                // 结束匹配请求发送成功
                console.log("离开匹配队列成功!");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                // 已经匹配到对手了. 
                console.log("匹配到对手! 进入游戏房间!");
                // location.assign("/game_room.html");
                location.replace("/game_room.html");
            } else if (resp.message == 'repeatConnection') {
                alert("当前检测到多开! 请使用其他账号登录!");
                location.replace("/login.html");
            } else {
                console.log("收到了非法的响应! message=" + resp.message);
            }
        }

        // 给匹配按钮添加一个点击事件
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function() {
            // 在触发 websocket 请求之前, 先确认下 websocket 连接是否好着呢~~ 
            if (websocket.readyState == websocket.OPEN) {
                // 如果当前 readyState 处在 OPEN 状态, 说明连接好着的~
                // 这里发送的数据有两种可能, 开始匹配/停止匹配~
                if (matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                }
            } else {
                // 这是说明连接当前是异常的状态
                alert("当前您的连接已经断开! 请重新登录!");
                location.replace('/login.html');
            }
        }
    </script>
</body>
</html>